import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Calendar, Clock, Building, Users, Target, ArrowRight } from "lucide-react";

// 模拟项目数据
const projects = [
  {
    id: 1,
    title: "智慧城市基础设施建设",
    company: "华夏科技有限公司",
    category: "智慧城市",
    budget: "1000-5000万",
    deadline: "2025-08-30",
    duration: "24个月",
    teamSize: "50-100人",
    description: "寻找在智慧城市基础设施建设方面有经验的合作伙伴，共同参与智慧交通、智慧能源、智慧安防等系统的建设。",
    requirements: ["智慧城市建设经验", "系统集成能力", "物联网技术", "大数据分析"],
    status: "招募中",
  },
  {
    id: 2,
    title: "新能源汽车充电网络建设",
    company: "绿源环保科技",
    category: "新能源",
    budget: "500-1000万",
    deadline: "2025-06-15",
    duration: "18个月",
    teamSize: "30-50人",
    description: "计划在全国主要城市建设新能源汽车充电网络，寻找在充电设施制造、安装和运营方面有经验的合作伙伴。",
    requirements: ["充电设施制造", "电网接入经验", "运营管理系统", "售后服务能力"],
    status: "招募中",
  },
  {
    id: 3,
    title: "企业数字化转型咨询服务",
    company: "金融创新投资",
    category: "数字化转型",
    budget: "100-500万",
    deadline: "2025-07-20",
    duration: "12个月",
    teamSize: "10-20人",
    description: "为传统企业提供数字化转型咨询服务，寻找在企业数字化转型方面有经验的咨询公司或技术团队。",
    requirements: ["数字化转型经验", "业务流程优化", "信息系统规划", "变革管理"],
    status: "招募中",
  },
  {
    id: 4,
    title: "医疗设备智能化升级",
    company: "康健医疗科技",
    category: "医疗健康",
    budget: "300-800万",
    deadline: "2025-09-10",
    duration: "15个月",
    teamSize: "20-30人",
    description: "对现有医疗设备进行智能化升级，寻找在医疗设备智能化方面有经验的技术团队。",
    requirements: ["医疗设备研发", "人工智能技术", "医疗数据分析", "医疗器械认证"],
    status: "招募中",
  },
  {
    id: 5,
    title: "工业机器人应用解决方案",
    company: "东方制造集团",
    category: "智能制造",
    budget: "200-600万",
    deadline: "2025-10-25",
    duration: "12个月",
    teamSize: "15-25人",
    description: "为制造业客户提供工业机器人应用解决方案，寻找在工业机器人应用方面有经验的技术团队。",
    requirements: ["工业机器人编程", "自动化生产线设计", "视觉识别技术", "工业软件开发"],
    status: "招募中",
  },
  {
    id: 6,
    title: "在线教育平台开发",
    company: "智慧教育集团",
    category: "教育科技",
    budget: "100-300万",
    deadline: "2025-08-15",
    duration: "9个月",
    teamSize: "10-15人",
    description: "开发面向K12和高等教育的在线教育平台，寻找在教育科技方面有经验的开发团队。",
    requirements: ["教育平台开发", "视频直播技术", "互动课堂功能", "学习数据分析"],
    status: "招募中",
  },
];

// 项目分类
const categories = ["全部", "智慧城市", "新能源", "数字化转型", "医疗健康", "智能制造", "教育科技"];

export default function ProjectsPage() {
  return (
    <div className="container py-10">
      <div className="space-y-4 text-center mb-10">
        <h1 className="text-3xl font-bold">项目对接</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          发布项目需求，寻找合作伙伴，促进会员企业间的项目合作
        </p>
        <div className="flex justify-center pt-4">
          <Button size="lg">发布新项目</Button>
        </div>
      </div>

      {/* 项目分类和列表 */}
      <Tabs defaultValue="全部" className="mb-10">
        <TabsList className="flex flex-wrap justify-center mb-8">
          {categories.map((category) => (
            <TabsTrigger key={category} value={category}>
              {category}
            </TabsTrigger>
          ))}
        </TabsList>
        {categories.map((category) => (
          <TabsContent key={category} value={category}>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {projects
                .filter((project) => category === "全部" || project.category === category)
                .map((project) => (
                  <Card key={project.id} className="flex flex-col">
                    <CardHeader>
                      <div className="flex justify-between items-start">
                        <CardTitle>{project.title}</CardTitle>
                        <Badge variant="outline">{project.status}</Badge>
                      </div>
                      <CardDescription className="flex items-center gap-1">
                        <Building className="h-4 w-4" /> {project.company}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="flex-1">
                      <p className="text-sm text-muted-foreground mb-4">{project.description}</p>
                      <div className="grid grid-cols-2 gap-y-2 text-sm mb-4">
                        <div className="flex items-center gap-2">
                          <Badge variant="secondary">{project.category}</Badge>
                        </div>
                        <div className="flex items-center gap-2">
                          <Calendar className="h-4 w-4 text-muted-foreground" />
                          <span>截止: {project.deadline}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                          <span>周期: {project.duration}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Users className="h-4 w-4 text-muted-foreground" />
                          <span>团队: {project.teamSize}</span>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <p className="text-sm font-medium">需求技能:</p>
                        <div className="flex flex-wrap gap-2">
                          {project.requirements.map((req, index) => (
                            <Badge key={index} variant="outline">{req}</Badge>
                          ))}
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between items-center">
                      <p className="font-semibold">预算: {project.budget}</p>
                      <Button className="gap-1">
                        申请对接 <ArrowRight className="h-4 w-4" />
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
            </div>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
}